<template>
  <div class='container'>
    <el-dialog
      :title="title"
      :visible="dialogVisible"
      width="50%"
      @close="handleClose">
      <el-form :model="addArtList" :rules='rules' ref="addRef" status-icon label-width="100px">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="addArtList.title" />
        </el-form-item>
        <el-form-item label="文章内容" prop="articleBody" >
          <quill-editor v-model="addArtList.articleBody" class="edit" :options="editorOptions"/>
        </el-form-item>
        <el-form-item label="视频地址" prop="videoURL">
          <el-input v-model="addArtList.videoURL" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="addArticle">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { add, update } from '@/api/hmmm/articles.js'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    nodeData: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      addArtList: { // 新增文章的数组
        id: '',
        articleBody: '',
        videoURL: ''
      },
      rules: { // 新增的校验规则
        title: [{ required: true, message: '请输入文章标题', trigger: ['blur', 'change'] }],
        articleBody: [{ required: true, message: '请输入文章内容', trigger: ['blur', 'change'] }]
      },
      echoArt (data) { // 修改文章的回显
        if (data.id) {
          this.addArtList = data
        } else {
          this.addArtList = {
            id: '',
            title: '',
            articleBody: '',
            videoURL: ''
          }
        }
      },
      editorOptions: { // 富文本功能
        placeholder: '',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            ['blockquote'], // 引用
            ['code-block', 'image', 'link'] // 代码块 链接、图片
          ]
        }
      }
    }
  },
  methods: {
    // 关闭对话框
    handleClose () {
      // 清空表单
      this.$refs.addRef.resetFields()
      this.addArtList = {
        id: null,
        title: null,
        articleBody: null,
        videoURL: null
      }
      // 子传父 关闭对话框
      this.$emit('update:dialogVisible', false)
    },
    // 确定添加功能
    addArticle () {
      this.$refs.addRef.validate(async boo => {
        if (!boo) return this.$message.warning('请检查必填项')
        if (this.addArtList.id) {
          // 发送修改请求
          const { data } = await update(this.addArtList)
          if (data.success !== true) return this.$message.warning('修改操作失败')
          this.$message.success('修改操作成功')
        } else {
          // 发送新增请求
          const res = await add(this.addArtList)
          if (res.status !== 200) return this.$message.warning('新增操作失败')
          this.$message.success('新增操作成功')
        }
        // 重新渲染
        this.$emit('obtainartList')
        // 关闭表单
        this.handleClose()
      })
    }
  },
  computed: {
    // 修改标题
    title () {
      return this.addArtList.id ? '修改文章' : '新增文章'
    }
  }
}
</script>

<style scoped lang='scss'>
  .edit {
    height: 200px;
    margin-bottom: 50px;
  }
</style>
